<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/walden.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>授课情况</title>
</head>
<style type="text/css">
    .leftChart{
        height: 300px;
        flex: 1.5
    }
    .rightChart{
        height: 300px;
        flex: 1.5
    }
    .pie{
        height: 300px;
        flex: 1.5
    }
    .echarts-container{
    	height:400px;
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    }
</style>
<body>
<div id="rrapp" v-cloak>
    <el-select
            v-model="collageValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;"
            placeholder="请选择部门">
        <el-option
                v-for="item in collageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="yearValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择学年">
        <el-option
                v-for="item in yearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="termValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择学期">
        <el-option
                v-for="item in termOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="weekValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择教学周">
        <el-option
                v-for="item in weekOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="dayValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择星期几">
        <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="indexValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择第几节">
        <el-option
                v-for="item in indexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</div>
<div class="search-container" >
    <div class="form-group" style="display: none" id="CollegeSelect">
        <select  class="form-control" id="College"  >
        </select>
    </div>
    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="startDate" name="startDate" placeholder="开始时间"/>
    </div>

    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate"  placeholder="结束时间"/>
    </div>

    <div class="btn-container">
        <a class="btn-thin" onclick="query()">查询</a>
    </div>

    <div class="btn-container">
        <span  class="normal-btn normal-color" onclick="setDate('1')">今日</span>
        <span  class="normal-btn normal-color" onclick="setDate('2')">本周</span>
        <span  class="normal-btn normal-color" onclick="setDate('3')">本月</span>
    </div>
    <div style="flex: 3;">

    </div>

</div>
<div class="echarts-container" >
    <div  id="zhengchang"  class="leftChart"></div>
    <div   id="chidao"  class="rightChart"></div>
</div>
<div class="echarts-container" >
    <div   id="zaotui"  class="leftChart"></div>
    <div   id="tiaozheng"  class="rightChart"></div>
</div>
<table id="jqGrid"></table >
<div id="jqGridPager"></div>
<script>
var vm = new Vue({
    el:'#rrapp',
    data:{
      collageData:null,
      yearData:null,
      termData:null,
      weekData:null,
      dayData:null,
      indexData:null,
      collageValue:[],
      yearValue:[],
      termValue:[],
      weekValue:[],
      dayValue:[],
      indexValue:[],
      collageOptions:[],
      yearOptions:[],
      termOptions:[],
      weekOptions:[],
      dayOptions:[],
      indexOptions:[]
    },
    mounted(){
         $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                    var tempJson={
                        'value':r.list[i].collegeName,
                        'label':r.list[i].collegeName
                    }
                    vm.collageOptions.push(tempJson)
                }
            }
        });
        $.ajax({
            url: baseURL + "/term/getSchoolTerm",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                     var tempJson={
                        'value':r.list[i].schoolAcademicYear,
                        'label':r.list[i].schoolAcademicYear
                    }
                    vm.yearOptions.push(tempJson)
                }
            }
         });
         var listTerm=["1","2"];
         for (i = 0; i < listTerm.length; i++) {
            var tempJson={
                'value':listTerm[i],
                'label':"第"+listTerm[i]+"学期"
            }
            this.termOptions.push(tempJson)
         }
         for (i = 1; i < 21; i++) {
            var tempJson={
                'value':i,
                'label':"第"+i+"周"
            }
            this.weekOptions.push(tempJson)
         }
         for (i = 1; i < 8; i++) {
           var tempJson={
                'value':i,
                'label':"星期"+i
            }
            this.dayOptions.push(tempJson)
         }
         for (i = 1; i < 11; i+=2) {
            var tempJson={
                'value':i,
                'label':"第"+i+"节"
            }
            this.indexOptions.push(tempJson)
         }
    },
    methods:{

    }
});
//*******************************v**u**e*********************************
//  var pie = echarts.init(document.getElementById('pie'),'customed');
    var zhengchang = echarts.init(document.getElementById('zhengchang'),'customed');
    var chidao = echarts.init(document.getElementById('chidao'));
    var zaotui = echarts.init(document.getElementById('zaotui'),'customed');
    var tiaozheng = echarts.init(document.getElementById('tiaozheng'));

    //饼状图
    var pieOption  = {
        title : {
            text: '出勤情况',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['正常','早退','迟到','调整']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var zhengchangOption = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            y: 'bottom',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['正常']
        },
        xAxis : [
            {
                type : 'category',
                splitLine : {show : false},
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                position: 'left',
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        grid:{
        	width:'80%'
        },
        series : [
            {
                name:'正常',
                type:'bar',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'出勤情况',
                type:'pie',
                tooltip : {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                center: ['84%',53],
                radius : [0, '18%'],
                itemStyle :　{
                    normal : {
                        labelLine : {
                            length : 20
                        }
                    }
                },
                data:[
                    {value:1048, name:'正常'},
                    {value:251, name:'迟到'},
                    {value:147, name:'早退'},
                    {value:147, name:'调整'}
                ]
            }
        ]
    };
    
    var chidaoOption = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            y: 'bottom',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['迟到']
        },
        xAxis : [
            {
                type : 'category',
                splitLine : {show : false},
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                position: 'left',
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series : [
            {
                name:'迟到',
                type:'line',
                tooltip : {trigger: 'item'},
                stack: '广告',
                data:[120, 132, 101, 134, 90, 230, 210],
                itemStyle:{
                    normal: {
                        lineStyle:{    
                            color:'green'    
                        }   
                    }
                },
            }
            ,{
                name:'出勤情况',
                type:'pie',
                tooltip : {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                center: ['84%',53],
                radius : [0, '18%'],
                itemStyle :　{
                    normal : {
                        labelLine : {
                            length : 20
                        }
                    }
                },
                data:[
                    {value:1048, name:'正常'},
                    {value:251, name:'迟到'},
                    {value:147, name:'早退'},
                    {value:147, name:'调整'}
                ]
            }
        ]
    };
    
    var zaotuiOption = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            y: 'bottom',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['早退']
        },
        xAxis : [
            {
                type : 'category',
                splitLine : {show : false},
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                position: 'left',
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series : [
            {
                name:'早退',
                type:'bar',
                tooltip : {trigger: 'item'},
                stack: '广告',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'出勤情况',
                type:'pie',
                tooltip : {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                center: ['84%',53],
                radius : [0, '18%'],
                itemStyle :　{
                    normal : {
                        labelLine : {
                            length : 20
                        }
                    }
                },
                data:[
                    {value:1048, name:'正常'},
                    {value:251, name:'迟到'},
                    {value:147, name:'早退'},
                    {value:147, name:'调整'}
                ]
            }
        ]
    };
    var tiaozhengOption = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            y: 'bottom',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['调整']
        },
        xAxis : [
            {
                type : 'category',
                splitLine : {show : false},
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                position: 'left',
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series : [
            {
                name:'调整',
                type:'bar',
                tooltip : {trigger: 'item'},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'出勤情况',
                type:'pie',
                tooltip : {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                center: ['84%',53],
                radius : [0, '18%'],
                itemStyle :　{
                    normal : {
                        labelLine : {
                            length : 20
                        }
                    }
                },
                data:[
                    {value:1048, name:'正常'},
                    {value:251, name:'迟到'},
                    {value:147, name:'早退'},
                    {value:147, name:'调整'}
                ]
            }
        ]
    };
    window.onresize = function(){
//      pie.resize()
        zhengchang.resize()
        chidao.resize()
        zaotui.resize()
        tiaozheng.resize()
    }
    $(function () {
        $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                $("#option").append("<option value=''>全校</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        setDate('3')
        $("#jqGrid").jqGrid({
            url: baseURL + 'ClassDiaryTable/SelectChidaoZaotui',
            datatype: "json",
            colModel: [
                { label: '日期', name: 'diaryPostTime',index:'diary_post_time', width: 35,key: true, sortable:false },
                { label: '教师姓名', name: 'courseTeacherName',index:'course_teacher_name', width: 30, sortable:false },
                { label: '工号', name: 'teacherId',index:'course_teacher_name', width: 40, sortable:false },
                { label: '所属院系', name: 'teacherCollege',index:'teacher_college', width: 35 , sortable:false},
                { label: '授课名称', name: 'courseName', index:'course_name',width: 50, sortable:false },
                { label: '节次', name: 'courseWhichIndex',index:'course_which_index', width: 30, sortable:false },
                { label: '授课班级', name: 'className', index:'class_name',width: 50 , sortable:false},
                { label: '状态', name: 'courseStatus', index:'class_name',width: 50 , sortable:false},
                { label: '上课时间', name: 'startClassTime',index:'arrive_time', width: 35, sortable:false },
                { label: '下课时间', name: 'endClassTime',index:'leave_time', width: 35 , sortable:false},
                { label: '到达时间', name: 'arriveTime',index:'arrive_time', width: 35, sortable:false },
                { label: '离开时间', name: 'leaveTime',index:'leave_time', width: 35 , sortable:false},
                { label: '教授时长', name: 'teachLength', index:'teach_length',width: 40, sortable:false },
            ],
            viewrecords: true,
            height:'100%',
            rowNum: 10,
            rowList : [10,30,50],
            rownumbers: true,
            postData:{
                'startDate': $("#startDate").val(),
                'endDate': $("#endDate").val(),
                "collegeName":vm.collageData,
                "academicYear":vm.yearData,
                "academicTerm":vm.termData,
                "academicWeek":vm.weekData,
                "academicDay":vm.dayData,
                "academicIndex":vm.indexData,
                'dateTime':'0000'
            },
            rownumWidth: 25,
            autowidth:true,
            multiselect: false,
            pager: "#jqGridPager",
            jsonReader : {
                root: "page.list",
                page: "page.currPage",
                total: "page.totalPage",
                records: "page.totalCount"
            },
            prmNames : {
                page:"page",
                rows:"limit",
                order: "order"
            },
            gridComplete:function(){
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
            },
            ondblClickRow:function(rowid){
                var rowData = $("#jqGrid").jqGrid('getRowData',rowid);
                var rowName =$("#jqGrid").jqGrid('getGridParam','colNames');
                var s="";
                var i=2;
                for(var key in rowData){
                    s=s+rowName[i++]+':'+rowData[key]+'<br> ';
                }
                // alert(s);
            }
        });
    })
    function getLineColor(data){
    	 var colorJson={
    	 	zhengchangOption:'#38ec49',
    	 	chidaoOption:'#e40d0d',
    	 	zaotuiOption:'#ecd61c',
    	 	tiaozhengOption:'#1870e9'
    	 }
    	 var value={
        	normal:{
        		color:colorJson[data],
        		lineStyle:{
        			color:colorJson[data]
        		}
        	}
         }
    	 return value
    }
    function goString(data){
		var temp=""
		for(let i in data){
			if(i==data.length-1){
				temp+=('\''+data[i]+'\'')
			}else{
				temp+=('\''+data[i]+'\'')+','
			}
		}
		return temp
	}
    function query()
    {
        vm.collageData=goString(vm.collageValue);
        vm.yearData=goString(vm.yearValue);
        vm.termData=goString(vm.termValue);
        vm.weekData=goString(vm.weekValue);
        vm.dayData=goString(vm.dayValue);
        vm.indexData=goString(vm.indexValue);
        $.ajax({
            url: baseURL + "allSchoolEcharts/getTeacherAttendenceEcharts",
            data: {
                "collegeName":vm.collageData,
                "academicYear":vm.yearData,
                "academicTerm":vm.termData,
                "academicWeek":vm.weekData,
                "academicDay":vm.dayData,
                "academicIndex":vm.indexData,
                "startDate":$("#startDate").val(),
                "endDate":$("#endDate").val()
            },
            success: function (r) {
//                pieOption.xAxis[0].data=r.teacherAttendanceTimePie.xAxis;
                zhengchangOption.xAxis[0].data=r.teacherAttendanceTimePie.xAxis;
                chidaoOption.xAxis[0].data=r.teacherAttendanceTimePie.xAxis;
                zaotuiOption.xAxis[0].data=r.teacherAttendanceTimePie.xAxis;
                tiaozhengOption.xAxis[0].data=r.teacherAttendanceTimePie.xAxis;
//                pieOption.series[0].data=r.teacherAttendancePie;
                zhengchangOption.series[0]=r.teacherAttendanceTimePie.data[0];
                chidaoOption.series[0]=r.teacherAttendanceTimePie.data[1];
                zaotuiOption.series[0]=r.teacherAttendanceTimePie.data[2];
                tiaozhengOption.series[0]=r.teacherAttendanceTimePie.data[3];
                
                zhengchangOption.series[0].itemStyle=window.getLineColor('zhengchangOption')
                chidaoOption.series[0].itemStyle=window.getLineColor('chidaoOption')
                zaotuiOption.series[0].itemStyle=window.getLineColor('zaotuiOption')
                tiaozhengOption.series[0].itemStyle=window.getLineColor('tiaozhengOption')

                zhengchangOption.series[1].data=r.teacherAttendancePie;
                chidaoOption.series[1].data=r.teacherAttendancePie;
                zaotuiOption.series[1].data=r.teacherAttendancePie;
                tiaozhengOption.series[1].data=r.teacherAttendancePie;
//              pie.setOption(pieOption);

                zhengchang.on('click', function (params) {
                    console.log(params);
                    getLog(params.name,params.seriesName);

                });
                chidao.on('click', function (params) {
                    console.log(params);
                    getLog(params.name,params.seriesName);

                });
                zaotui.on('click', function (params) {
                    console.log(params);
                    getLog(params.name,params.seriesName);

                });
                tiaozheng.on('click', function (params) {
                    console.log(params);
                    getLog(params.name,params.seriesName);

                });

                zhengchang.setOption(zhengchangOption);
                chidao.setOption(chidaoOption);
                zaotui.setOption(zaotuiOption);
                tiaozheng.setOption(tiaozhengOption);

            }
        });

    }
function getLog(dateTime,courseStatus) {
    var page = $("#jqGrid").jqGrid('getGridParam','page');
    $("#jqGrid").jqGrid('setGridParam',{
        postData:{
            'startDate': $("#startDate").val(),
            'endDate': $("#endDate").val(),
            "dateTime":dateTime,
            'courseStatus':courseStatus,
             "collegeName":vm.collageData,
            "academicYear":vm.yearData,
            "academicTerm":vm.termData,
            "academicWeek":vm.weekData,
            "academicDay":vm.dayData,
            "academicIndex":vm.indexData,
        },
        page:page
    }).trigger("reloadGrid");
    //
    //
    //
    //
    // $.ajax({
    //     url: baseURL + "allSchoolEcharts/getTeacherChidaoZaotuiEcharts",
    //     data: {
    //         "teacherId":id,
    //         "startDate":$("#startDate").val(),
    //         "endDate":$("#endDate").val()
    //     },
    //     success: function (r) {
    //
    //     }
    // });
}
</script>
</body>
</html>